<template>
    <div class="user-home ">

        <ul class="user-list clear ">
            <li @click="add()">

            </li>
            <li>用户登录</li>
            <li></li>

        </ul>
        <div class="logo">
            <img src="../assets/images/背景.gif" alt="">
        </div>
        <div class="toMy">
            <van-form @submit="onSubmit">
                <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]">
                </van-field>
                <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">登录</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>
  
<script>
import { Toast } from 'vant';

export default {
    data() {
        return {
            username: "",
            password: "",
        };
    },



    methods: {
        add() {
            this.$router.go(-1)


        },
        onSubmit(values) {
            console.log("submit", values);
            var Usename = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;
            if (Usename.test(this.username)) {
                window.localStorage.setItem('userName', this.username);
                this.$router.go(-1)
                window.localStorage.setItem("login", true);



            } else {
                Toast("请输入正确的格式")
                this.username = ""
                this.password = ""
            }

            console.log(this.username);

        },
    },

};
</script>

<style lang="scss" scoped>
.logo {
    padding-top: 50px;
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
    width: 100%;

    img {
        width: 100%;
        height: 100%;
    }
}

.user-list {

    height: 48px;
    width: 100%;

    color: #333;
    font-size: 16.405px;
    z-index: 90;
}

.user-list li+li {
    width: 64%;
    -webkit-box-pack: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user-list li {
    float: left;
    display: -webkit-box;
    -webkit-box-align: center;
    height: 48px;
}

.user-list {
    max-width: 500px;
    margin: 0 auto;

    height: 48px;
    width: 100%;
    background-color: #4AE489;
    color: #fff;
    font-size: 16px;
    font-weight: bold;

    z-index: 90;
    top: 0;
}


.user-list li:first-child {
    cursor: pointer;
    width: 18%;
    color: #BFBFBF;
    font-size: 20px
}

.user-list li:last-child {
    width: 18%;
}

.user-list li:first-child::before {
    background: url("https://rs.sfacg.com/web/m/images/menu_top_icon.png") no-repeat -49.216px 9.96px;
    background-size: 100px;
    content: "";
    height: 48px;
    width: 25px;
    display: block;
    position: absolute;
    left: 10px;
}

::v-deep .van-button--info {
    color: #fff;
    background-color: #4AE489;
    border: 1px solid #4AE489;
}

// .user-home  {
//     background: url("../assets/images/背景.jpg") no-repeat center top;
//     background-size: 100% 100%;
//     min-height: 6.4rem;
//     max-width: 750px;
//     min-width: 375px;
//     margin: 0 auto;
// }
</style>